<template>
	<div id='page__order'>
		<header class="page__header">
			<h2 class="page__title">
				<i class="el-icon-s-order"></i>
				<span>订单列表</span>
			</h2>
		</header>
		<div class="page__main">
			<el-table
				:data="tableData"
				v-loading="loading"
				style="width: 100%">
				<el-table-column
					prop="id"
					label="订单ID"
					width="70px"
				>
				</el-table-column>
				<el-table-column
					prop="name"
					label="订单名称"
					:show-overflow-tooltip="true"
				>
				</el-table-column>
				<el-table-column
					prop="money"
					label="金额"
					width="100px"
				>
				</el-table-column>
				<el-table-column
					prop="createTime"
					label="创建时间"
					width="160px"
				>
				</el-table-column>
				<el-table-column
					prop="payTime"
					label="付款时间"
					width="160px"
				>
				</el-table-column>
				<el-table-column
					prop="status"
					label="状态"
					width="80px"
				>
					<template slot-scope="prop">
						<span :class="[prop.row.status === ORDER_PAID ? 'success' : '']">
							{{ORDER_STATUS_MAP[prop.row.status]}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					label="操作"
					width="120px"
				>
					<template slot-scope="prop">
						<el-button
							v-if="prop.row.status === ORDER_UNPAID"
							size="small"
							type="text"
							@click="payOrder(prop.row)"
						>
							付款
						</el-button>
						<el-button
							size="small"
							type="text"
							@click="$router.push('/order/detail?id=' + prop.row.id)"
						>
							详情
						</el-button>
						<el-button
							size="small"
							type="text"
							@click="deleteOrder(prop.row)"
						>
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				layout="prev, pager, next"
				:hide-on-single-page="true"
				:current-page="form.page"
				:page-size="form.size"
				:total="total"
				@current-change="changePage"
			>
			</el-pagination>
		</div>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import * as CONSTANT from "../../config/constant";

  export default {
    name: "index",
    data() {
      return {
        ...CONSTANT,
        tableData: [],
        total: 0,
        loading: false,
        form: {
          page: 1,
          size: CONSTANT.PAGE_SIZE,
          keyword: ''
        }
      }
    },
    mounted() {
      this.changePage(1)
    },
    methods: {
      changePage(page) {
        this.form.page = page
        this.getList()
      },
      getList() {
        this.loading = true
        let total = 0,
          tableData = []
        this.$axios.get('/order/list', {
            params: this.form,
            abort: true
          })
          .then(({success, message, data}) => {
            if (success) {
              total = data.total
              tableData = data.content
            } else {
              this.$message.error(message)
            }
          })
          .catch(({message}) => {
            this.$message.error(message)
          })
          .finally(() => {
            this.loading = false
            this.total = total
            this.tableData = tableData
          })
      },
      async payOrder(row) {
        let flag = await this.$store.dispatch('payOrder', row.id)
        if (flag) {
          this.getList()
        }
      },
      async deleteOrder(row) {
        let flag = await this.$store.dispatch('deleteOrder', row.id)
        if (flag) {
          this.getList()
        }
      }
    }
  }
</script>

<style lang='less'>
	#page__order {
		flex-shrink: 1;
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		.el-icon-s-order{
			color: #409EFF;
		}

		.page__main {
			flex-grow: 1;
			flex-shrink: 1;
		}
	}
</style>
